<template>
  <div class="article-detail">
    <!-- 导航栏 -->
    <van-nav-bar title="文章详情" left-arrow @click-left="$router.go(-1)" />
    <!-- 内容 -->
    <div class="detail">
      <!-- 标题 -->
      <h3 class="title">{{ info.title }}</h3>
      <!-- 作者信息 -->
      <div class="author">
        <!-- 头像 -->
        <van-image class="avatar" round fit="cover" :src="info.aut_photo" />
        <!-- 名字和日期 -->
        <div class="info">
          <div class="name">{{ info.aut_name }}</div>
          <div class="time">{{ info.pubdate | reltTime }}</div>
        </div>
        <!-- 关注按钮 -->
        <van-button type="info" round @click="doFollow()">{{
          info.is_followed ? "取关" : "+ 关注"
        }}</van-button>
      </div>
      <!-- 文章内容 -->
      <div class="content">
        <div v-html="info.content"></div>
      </div>
    </div>
    <!-- 分割线 -->
    <van-divider>end</van-divider>
    <!-- 点赞区域 -->
    <div class="zan">
      <van-button plain round type="primary" icon="good-job-o">点赞</van-button>
      <van-button plain round type="danger" icon="delete">不喜欢</van-button>
    </div>

    <!-- 评论组件 -->
    <comment />

  </div>
</template>

<script>
import { articleDetail } from "@/api/article";
import { followUser, unFollowUser } from "../../api/user";
import comment from "./comment.vue";
export default {
  data() {
    return {
      info: {},
    };
  },
  components: {
    comment,
  },
  async created() {
    // 根据文章id发起请求获得文章信息
    let res = await articleDetail(this.$route.query.id);
    // console.log(res);
    this.info = res.data.data;
  },
  methods: {
    async doFollow() {
      // 应该既可以关注也可以取关（两个功能）
      if (this.info.is_followed) {
        // 取关业务
        let res = await unFollowUser(this.info.aut_id);
        this.$toast.success("取关成功！");
      } else {
        // 关注
        let res = await followUser(this.info.aut_id);
        this.$toast.success("关注成功！");
      }
      // 点击了 取关变关注 关注变取关
      this.info.is_followed = !this.info.is_followed;
    },
  },
};
</script>

<style lang="less">
.article-detail {
  .detail {
    padding: 0 15px;
    .title {
      font-size: 24px;
      margin: 10px 0;
    }

    // 作者信息区域
    .author {
      display: flex;
      align-items: center;

      .avatar {
        width: 40px;
        height: 40px;
      }

      .info {
        flex: 1;
        margin-left: 10px;
        .time {
          color: gray;
        }
      }
    }

    .content {
      margin: 20px 0;
      overflow: auto;
      // height: 2000px;

      img {
        // 如果图片实际宽度超过了父容器的宽度，也只是用父容器的宽度
        // 如果没超过,是多大就多大
        max-width: 100%;
      }
    }
  }

  .zan {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
    .van-button {
      margin: 0 15px;
    }
  }
}
</style>
